﻿<!doctype html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jquery多皮肤悬浮QQ客服插件fixed</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    
    body {
        font: 13px/1.5 "Microsoft Yahei"
    }
    
    a {
        color: #737373;
        text-decoration: none;
    }
    
    a:hover {
        text-decoration: none;
        color: #f30;
    }
    
    .clearfix:after {
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
    }
    
    .clearfix {
        *zoom: 1;
    }
    
    .demo {
        width: 960px;
        margin: 0 auto;
        padding: 100px 50px 0;
        background-color: #f2f2f2;
    }
    
    .qhd-desc h2 {
        margin-bottom: 0.8em;
    }
    
    .qhd-desc h3 {
        margin-bottom: 0.6em;
    }
    
    .qhd-desc p {
        margin-bottom: 0.5em;
    }
    
    .demo-copyright {
        margin-top: 100px;
        text-align: center;
    }
    </style>
    <link rel="stylesheet" type="text/css" href="css/service.css" />
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.fixed.1.5.1.js"></script>
    <script language="javascript">
    //must window loading,don't use the document loading
    $(window).load(function() {
        //皮肤 gray blue yellow green orange white
        //悬浮客服
        $("#fixedBox2").fix({
            position: "left", //悬浮位置 - left或right
            horizontal: 0, //水平方向的位置 - 默认为数字
            vertical: null, //垂直方向的位置 - 默认为null
            halfTop: false, //是否垂直居中位置
            minStatue: false, //是否最小化
            hideCloseBtn: false, //是否隐藏关闭按钮
            skin: "gray", //皮肤
            showBtnWidth: 28, //show_btn_width
            contentBoxWidth: 154, //side_content_width
            durationTime: 600 //完成时间
        });

        //悬浮客服
        $("#fixedBox").fix({
            position: "right", //悬浮位置 - left或right
            horizontal: 0, //水平方向的位置 - 默认为数字
            vertical: 100, //垂直方向的位置 - 默认为null
            halfTop: true, //是否垂直居中位置
            minStatue: true, //是否最小化
            hideCloseBtn: false, //是否隐藏关闭按钮
            skin: "yellow", //皮肤
            showBtnWidth: 28, //show_btn_width
            contentBoxWidth: 154, //side_content_width
            durationTime: 1000 //完成时间
        });

    });
    </script>
</head>

<body>
    <div class="demo" style="height:2000px;">
    </div>
    <!-- S 客服 -->
    <div class="fixed_box" id="fixedBox">
        <div class="content_box">
            <div class="content_inner">
                <div class="close_btn"><a title="关闭"><span>关闭</span></a></div>
                <div class="content_title"><span>客服中心</span></div>
                <div class="content_list">
                    <div class="qqserver">
                        <p>
                            <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&amp;uin=168660460&amp;site=qq&amp;menu=yes">
                                <img border="0" src="http://wpa.qq.com/pa?p=2:168660460:41" alt="点击这里给我发消息" title="点击这里给我发消息">
                                <span>方雨</span>
                            </a>
                        </p>
                        <p>
                            <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=168660460&site=qq&menu=yes">
                                <img border="0" src="http://wpa.qq.com/pa?p=2:168660460:41" alt="点击这里给我发消息" title="点击这里给我发消息">
                                <span>方雨</span>
                            </a>
                        </p>
                        <p>
                            <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=168660460&site=qq&menu=yes">
                                <img border="0" src="http://wpa.qq.com/pa?p=2:168660460:41" alt="点击这里给我发消息" title="点击这里给我发消息">
                                <span>方雨</span>
                            </a>
                        </p>
                        <p>
                            <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=168660460&site=qq&menu=yes">
                                <img border="0" src="http://wpa.qq.com/pa?p=2:168660460:41" alt="点击这里给我发消息" title="点击这里给我发消息">
                                <span>方雨</span>
                            </a>
                        </p>
                        <p>
                            <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=168660460&site=qq&menu=yes">
                                <img border="0" src="http://wpa.qq.com/pa?p=2:168660460:41" alt="点击这里给我发消息" title="点击这里给我发消息">
                                <span>方雨</span>
                            </a>
                        </p>
                        <p>
                            <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=168660460&site=qq&menu=yes">
                                <img border="0" src="http://wpa.qq.com/pa?p=2:168660460:41" alt="点击这里给我发消息" title="点击这里给我发消息">
                                <span>方雨</span>
                            </a>
                        </p>
                    </div>
                    <hr>
                    <div class="phoneserver">
                        <h5>客户服务热线</h5>
                        <p>请直接QQ联系！</p>
                    </div>
                    <hr>
                    <div class="msgserver">
                        <p><a href="http://qihudong.chinagdcj.cn/feedback/language_zh-CN?jsResource">给我们留言</a></p>
                    </div>
                </div>
                <div class="content_bottom"></div>
            </div>
        </div>
        <div class="show_btn"><span>展开客服</span></div>
    </div>
    <!-- E 客服 -->
    <!--  ================================== 分割线 ====================================  -->
    <!-- S 客服 -->
    <div class="fixed_box" id="fixedBox2">
        <div class="content_box">
            <div class="content_inner">
                <div class="close_btn"><a title="关闭"><span>关闭</span></a></div>
                <div class="content_title"><span>客服中心</span></div>
                <div class="content_list">
                    <div class="qqserver">
                        <p>
                            <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=168660460&site=qq&menu=yes">
                                <img border="0" src="http://wpa.qq.com/pa?p=2:168660460:41" alt="点击这里给我发消息" title="点击这里给我发消息">
                                <span>方雨</span>
                            </a>
                        </p>
                        <p>
                            <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=168660460&site=qq&menu=yes">
                                <img border="0" src="http://wpa.qq.com/pa?p=2:168660460:41" alt="点击这里给我发消息" title="点击这里给我发消息">
                                <span>方雨</span>
                            </a>
                        </p>
                        <p>
                            <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=168660460&site=qq&menu=yes">
                                <img border="0" src="http://wpa.qq.com/pa?p=2:168660460:41" alt="点击这里给我发消息" title="点击这里给我发消息">
                                <span>方雨</span>
                            </a>
                        </p>
                    </div>
                    <hr>
                    <div class="phoneserver">
                        <h5>客户服务热线</h5>
                        <p>请直接QQ联系！</p>
                    </div>
                    <hr>
                    <div class="msgserver">
                        <p><a href="http://sc.chinaz.com/">给我们留言</a></p>
                    </div>
                </div>
                <div class="content_bottom"></div>
            </div>
        </div>
        <div class="show_btn"><span>展开客服</span></div>
    </div>
    <!-- E 客服 -->
</body>

</html>
